<template>
    <div class="footer">
        <div>登录时间: {{ loginTime }}</div>
        <div>总车数:{{totalInfo.all}}</div>
        <div><span class="status online"></span>在线({{totalInfo.online}})</div>
        <div><span class="status stop"></span>熄火({{totalInfo.stall}})</div>
        <div><span class="status offline"></span>离线({{totalInfo.offline}})</div>
        <div><span class="status waring"></span>报警({{totalInfo.alarm}})</div>
        <div><span class="status outage"></span>停运({{totalInfo.outage}})</div>
        <div>车辆在线率: {{totalInfo.onlineRate ? totalInfo.onlineRate.toFixed(2) : 0}}%(不含停运)</div>
    </div>
</template>
<script setup>
import useUserStore from '@/store/modules/user'
import useVehicleStore from '@/store/modules/vehicle'
const userStore = useUserStore();
const {loginTime} = storeToRefs(userStore)
const {totalInfo} = storeToRefs(useVehicleStore())
</script>
<style lang="scss" scoped>
.footer {
    padding-left: 27px;
    position: absolute;
    height: 40px;
    background: #1C2F61;
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    bottom: 0;
    width: 100%;
    z-index:999;
    div{
        margin-right: 26px;
    }
    .status {
        width: 12px;
        height: 12px;
        display: inline-block;
        margin-right: 4px;
        &.online{
            background: #6FBA2C;
        }
        &.stop{
            background: #F59A23;
        }
        &.offline{
            background: #5975BE;
        }
        &.waring{
            background: #F23333;
        }
        &.outage{
            background: #999999;
        }
    }
}
</style>
